import React from 'react';
import { UploadOutlined } from '@ant-design/icons';
import { Button, message, Upload } from 'antd';
import ProForm, { ProFormRadio, ProFormText } from '@ant-design/pro-form';
import { useRequest } from 'umi';
import { accountSetting, accountSettingSave } from '../service';

import styles from './BaseView.less';
import { AccountSetting } from '@/pages/Account/Settings/data';

// 头像组件 方便以后独立，增加裁剪之类的功能
const AvatarView = ({ avatar }: { avatar: string }) => (
  <>
    <div className={styles.avatar_title}>头像</div>
    <div className={styles.avatar}>
      <img src={avatar} alt="avatar" />
    </div>
    <Upload showUploadList={false}>
      <div className={styles.button_view}>
        <Button>
          <UploadOutlined />
          更换头像
        </Button>
      </div>
    </Upload>
  </>
);

const BaseView: React.FC = () => {
  const { data: account, loading } = useRequest<{ data: AccountSetting }>(() => {
    return accountSetting();
  });

  const getAvatarURL = () => {
    if (account) {
      if (account.avatar) {
        return account.avatar;
      }
      const url = 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
      return url;
    }
    return '';
  };

  const handleFinish = async (values: AccountSetting) => {
    values.accountId = account?.accountId;
    console.log(values);
    const msg = await accountSettingSave(values);
    console.log(msg);
    message.success('更新基本信息成功');
  };
  return (
    <div className={styles.baseView}>
      {loading ? null : (
        <>
          <div className={styles.left}>
            <ProForm
              // layout="vertical"
              onFinish={handleFinish}
              submitter={{
                resetButtonProps: {
                  style: {
                    display: 'none',
                  },
                },
                submitButtonProps: {
                  children: '更新基本信息',
                },
              }}
              initialValues={{
                ...account,
              }}
              // layout={'horizontal'}
              hideRequiredMark
            >
              <ProFormText width="md" name="account" disabled label="账号" />
              <ProFormText width="md" name="name" label="名称" disabled />

              <ProFormText
                width="md"
                name="email"
                label="邮箱"
                placeholder={'请输入电子邮箱'}
                rules={[
                  {
                    required: true,
                    message: '请输入您的电子邮箱!',
                  },
                  {
                    type: 'email',
                    message: '邮箱地址格式错误!',
                  },
                ]}
              />
              <ProFormRadio.Group
                width="md"
                name="sex"
                label="性别"
                options={[
                  {
                    label: '男',
                    value: 0,
                  },
                  {
                    label: '女',
                    value: 1,
                  },
                  {
                    label: '未知',
                    value: 2,
                  },
                ]}
              />
            </ProForm>
          </div>
          {/*<div className={styles.right}>*/}
          {/*  <AvatarView avatar={getAvatarURL()} />*/}
          {/*</div>*/}
        </>
      )}
    </div>
  );
};

export default BaseView;
